<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>分店管理-添加新预约</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/project_set.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
	<script src="/js/common.js"></script>
</head>
<style>
/* ::-webkit-scrollbar-thumb {
  background:rgb(95,106,135); 
  border-radius: 10px;
  height:50%;
} */
body{
	height: auto; 
	overflow:auto;
}
.date-input {
    padding-left: 30px;
    background: url(/images/icon/rili_icon.png) no-repeat 10px center !important;
}
.layui-form-label{
    width:auto;
	padding:9px 4px;
	text-align:right;
}
</style>
<script>
	$(document).ready(function() {
		var projectId=parent.parent.$("#projectId").val();
		var url="/app/customerTeam/selectjson/"+projectId;
		$("#fkTeam").html("<option value='' selected='selected'>请选择团队</option>");
		$.post(url,function(res){
			for(var i=0;i<res.length;i++){
				$("#fkTeam").append("<option value='"+res[i].id+"' >"+res[i].text+"</option>");  
			}
			renderForm();//表单重新渲染，要不然添加完显示不出来新的option 
	    },"json");
		var url1="/app/projectField/selectjson/"+projectId;
		$("#field").html("<option value='' selected='selected'>请选择场地</option>");
		$.post(url1,function(res){
			for(var i=0;i<res.length;i++){
				$("#field").append("<option value='"+res[i].id+"' >"+res[i].text+"</option>");  
			}
			renderForm();//表单重新渲染，要不然添加完显示不出来新的option 
	    },"json");
	});
	//重新渲染表单
	function renderForm(){
	    layui.use('form', function(){
	       var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
	       form.render();
	    });
	}
</script>
<body>
	<div class="nav-section-content-container" style="padding: 0px">
		<header class="nav-header">
			<div class="nav-section-header-title">
				<span>预定记录</span>
				<div class="f-right">
				    <button class="layui-btn layui-btn-radius layui-btn-normal " id="add_order"><i class="layui-icon">&#xe654;</i>添加新预约</button>
				</div>
			</div>
		</header>
		<div class="nav-section-content-container">
			<div class="m-updown">
				<div class="nav-section-action-bar">
					<div class="layui-form-item layui-form"">
						<div class="layui-inline">
						    <div class="layui-input-inline" style="width:130px">
						      	 <input type="text" name="bookDate" id="bookDate" onchange="test(this.value)" lay-verify="bookDate" placeholder="请选择日期" autocomplete="off" class="layui-input">
						    </div>
						    <div class="layui-input-inline" style="width:130px">
						      	 <select name="field" id="field"  lay-filter="field" lay-verify="field"  >
					   			 </select>
						    </div>
						    <div class="layui-input-inline" style="width:130px">
						      	 <select name="fkTeam" id="fkTeam"  lay-filter="fkTeam" lay-verify="fkTeam" >
					   			 </select>
						    </div>
						</div>
					</div>
					<table class="layui-hide" id="LAY_table_field" lay-filter="field"></table> 
					<script type="text/html" id="name">
  						{{d.field.name}}
					</script>
					<script type="text/html" id="fullName">
  						{{# if(d.team!=null){ }}
						{{ d.team.fullName }}
						{{# } }}
					</script>
					<script type="text/html" id="Contacts">
  						{{# if(d.team!=null){ }}
						{{ d.team.chargeName }}
						{{# }else{ }}
						{{  d.contacts }}
						{{#  } }}
					</script>
					<script type="text/html" id="telephone">
  						{{# if(d.team!=null){ }}
						{{ d.team.chargePhone }}
						{{# }else{ }}
						{{  d.telephone }}
						{{#  } }}
					</script>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
var table,startDate,teamId,fieldId;
$(function(){
	setHeight();
	var projectId=parent.parent.$("#projectId").val();
	layui.use(['element','layer','form','table', 'laydate'], function(){
		var form = layui.form,laydate = layui.laydate;
		table = layui.table;
		form.on('select(field)', function(data){
			fieldId=data.value;
			reloadList();
		});
		form.on('select(fkTeam)', function(data){
			teamId=data.value;
			reloadList();
		});
		
		
		//日期
		laydate.render({
		    elem: '#bookDate'
		    ,done: function(value, date){
			    startDate=value;
			    
			    reloadList();
		    }
		});
		//方法级渲染
		table.render({
			id:'field',
		    elem: '#LAY_table_field',
		    url: '/app/projectFieldTeam/listdata',
		    cols: [[
		      {field:'name',toolbar: '#name', align:'left', title: '场地名称',width:'10%'}
		      ,{field:'fullName',toolbar: '#fullName', align:'left', title: '公司',width:'20%'}
		      ,{field:'Contacts',toolbar: '#Contacts', align:'center', title: '租借者',width:'10%'}
		      ,{field:'telephone',toolbar: '#telephone', align:'left', title: '电话',width:'15%'}
		      ,{field:'bookStartDate', align:'left', title: '使用日期',width:'15%'}
		      ,{field:'startTime', align:'left', title: '开始时间',width:'10%'}
		      ,{field: 'endTime', align:'center',title: '结束时间',width:'12.8%'}
		    ]]
		    ,page: true
		    ,where: {
	        	params:{
	        		projectId: projectId
	        	}
	        },done:function(){
	        	setHeight()
	        }
		});
	})
	
	//添加新预约
    $("#add_order").on("click",function(){
    	$('#iframeSet-wrap', window.parent.document).children("iframe").attr('src','/app/projectFieldTeam/search');
    })
})
function reloadList(){
	table.reload('field', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
        	params:{
        		startDate: startDate,
        		teamId: teamId,
        		fieldId: fieldId
        	}
        },done:function(){
        	setHeight()
        }
    });
}
function setHeight(){
	var h = document.body.offsetHeight;
    window.parent.setiframeWrap(h);
}
</script>
</html>